<template>
	<view>
		<view class="caozuo" >
			<view>
				<checkbox-group class="flex align-center" @click="changeAll">
					<checkbox :checked="checked" :class="checked==true?'checked':''" class="round"></checkbox>
					<text style="font-size: 110%;margin-left: 10upx;" class="sm-checked">全选</text>
				</checkbox-group>
			</view>
			<view class="cu-btn sm round" @click="deleteChecked">
				<text class="cuIcon-delete" ></text>删除
			</view>
		</view>
		<view class="cart-content">
			<view class="cart-item bg-white" v-for="(good,index) in goods" :key="index">
				<view class="flex align-center">
					<checkbox @click="changeCheck(index)" :checked="good.checked" :class="good.checked==true?'checked':''" class="round sm-checked"></checkbox>
					<image :src="good.img"></image>
				</view>
				<view class="cart-ycontent" style="width: 420upx;">
					<view class="cart-title">{{good.content}}</view>
					<view>
						<view class="text-gray">类型:{{good.type}}</view>
						<view class="flex justify-between">
							<view class="text-red text-bold text-lg">{{good.price}}元</view>
							<uni-number-box @change="changeNum" style="margin-left: 80upx;" :min="0" :max="99" v-model="good.num"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="heji flex justify-between align-center">
			<view style="font-size: 110%;">合计
				<text class="text-orange" style="margin-left: 10upx;">{{sum}}元</text>
			</view>
			<view>
				<view class="cu-btn bg-gradual-red round">结算</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import uniNerberBox from "../../../components/uni-number-box/uni-number-box.vue"
	export default {
		components: {
			uniNerberBox,
		},
		data() {
			return {
				checked: true,
				//标签下标
				count:0,

				//搜索
				search: "",
				
				//goods
				goods:[],
				
				//img
				img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XLWAP4lmAACR89VA2vM973.jpg",
				
				//导航栏列表
				TabList: [{
						tag: "首页",
						url: "../index",
					},
					{
						tag: "商品",
						url: "../goods/goods",
					},
					{
						tag: "购物车",
						url: "../carts/carts",
					},
					{
						tag: "我的",
						url: "../mine/mine",
					},
				],
			}
		},
		mounted() {
			this.getdata();
		},
		computed:{
			sum(){
				var number = 0
				this.goods.forEach(good=>{
					if(good.checked==true){
						number+=good.num*good.price;
					}
				})
				return number.toFixed(2);
			}
		},
		methods: {
			deleteChecked(){
				this.goods = this.goods.filter(good=>{
					return !good.checked;
				})
			},
			changeNum(e){
				var that = this;
				e = parseInt(e);
				if(e==0){
					var thisGood = this.goods.find(good =>{
						return good.num==0;
					});
					console.log(thisGood);
					uni.showModal({
						confirmText:"是的",
						content:"您确定要把"+thisGood.content+"移除吗?",
						title:"移除警告",
						success(res) {
							if(res.confirm==true){
								that.goods = that.goods.filter(good=>{
									return good.id!=thisGood.id;
								})
							}
						}
					})
				}
			},
			changeAll(e) {
				this.checked ? this.checked = false : this.checked = true;
				this.goods.forEach(good=>{
					return good.checked=this.checked;
				})
			},
			changeCheck(e) {
				this.goods[e].checked ? this.goods[e].checked = false : this.goods[e].checked = true;
				var selected = this.goods.filter(good=>{
					return !good.checked;
				})
				selected.length==0?this.checked=true:this.checked=false;
			},
			getdata(){
				var data=[
					{
						id:1,
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XHCAXC49AACYrBrsRsM205.jpg",
						type:"5斤装",
						content:"荔枝",
						price:"20",
						num:1,
						checked:true,
					},{
						id:2,
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XLWAP4lmAACR89VA2vM973.jpg",
						type:"5斤装",
						content:"牛油果",
						price:"35",
						num:2,
						checked:true,
					},{
						id:3,
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XJGAU8CGAAJNRpB7hYE364.jpg",
						type:"5斤装",
						content:"香草柠",
						price:"19.9",
						num:1,
						checked:true,
					}
				];
				this.goods=data;
				
			}
		}
	}
</script>

<style>
	.sm-checked{
		transform: scale(0.7);
	}
	.cart-ycontent{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 8upx;
		padding-bottom: 8upx;
		
		
	}
	.cart-title{
		font-size: 110%;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.caozuo {
		border-top: 0.5upx #EEEEEE solid;
		top:180upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		height: 80upx;
		align-items: center;
		width: 750upx;
		padding-left: 30upx;
		padding-right: 30upx;
		margin-bottom: 10upx;
	}

	.cart-content {
		margin-top: 10upx;
		margin-bottom: 200upx;
		border-top: 0.5upx #EEEEEE solid;
		
	}
	.cart-item{
		display: flex;
		justify-content: space-between;
		padding: 20upx 20upx 20upx 20upx;
		margin-top: 20upx;
		
	}
	.cart-item image{
		width: 200upx;
		height: 200upx;
		border: 0.5upx #EEEEEE solid;
		margin-left: 10upx;
	}
	
	.heji{
		position: fixed;
		bottom: 0upx;
		width: 750upx;
		height: 100upx;
		background-color: white;
		padding-left: 30upx;
		padding-right: 30upx;
	}
</style>
